<template>
  <div class="hemepage-title">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <!-- <el-breadcrumb-item
         
          v-for="item in levelList"
          :key="item.path"
          :to="item.path"
          >{{ item.meta }}</el-breadcrumb-item
        > -->
      <el-breadcrumb-item class="el-breadcrumb-item" :to="{path: '/home'}">首页</el-breadcrumb-item>
      <!-- <el-breadcrumb-item v-if="$route.meta.length!=1" class="el-breadcrumb-item" v-for="(item, index) in $route.meta" :key="index">
        {{ item.title}}
      </el-breadcrumb-item> -->
      <el-breadcrumb-item class="el-breadcrumb-item" v-for="(item, index) in $route.meta" :key="index">
        {{ item.title}}
      </el-breadcrumb-item>
    </el-breadcrumb>

  </div>
</template>
<style lang="less" scoped>
.hemepage-title {
  height: 60px;

  background-color: rgb(255, 255, 255);
  margin-bottom: 20px;
}
.el-breadcrumb-item {
  font-size: 22px;
  line-height: 60px;
  margin-left: 20px;
}
</style>

<script>
export default {
  name: "Navbar",
  data () {
    return {
      levelList: [],
    };
  },
  watch: {
    $route () {
      this.getBreadcrumb();
    },
  },
  created () {
    this.getBreadcrumb();
  },
  methods: {
    getBreadcrumb () {
      //$route.matched一个数组 包含当前路由的所有嵌套路径片段的路由记录
      let matched = this.$route.matched.filter((item) => item.name);
      const first = matched[0];

      if (first.path == "/homepage") {
        // console.log("======")
        matched = []

      }

      this.levelList = matched;
    },
  },
};
</script>